<template>
  <div class="vm">
    <!-- 搜索框 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="设备编号：">
        <el-input v-model="vmCode" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- table表格 -->
    <div class="table">
      <el-row class="addTable">
        <el-button
          icon="el-icon-circle-plus-outline"
          class="add"
          type="primary"
          @click="addTable"
        >新建</el-button>
        <el-button class="piliang" plain @click="piliang">批量操作</el-button>
      </el-row>
      <el-table
        :border="false"
        :data="list"
        class="table"
        style="width: 100%"
        @selection-change="select"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="130" />
        <el-table-column prop="innerCode" label="设备编号" width="230" />
        <el-table-column prop="type.name" label="设备型号" />
        <el-table-column prop="node.name" label="详细地址" width="270" />
        <el-table-column prop="ownerName" label="合作商" width="270" />
        <el-table-column
          prop="vmStatus"
          label="设备状态"
        ><template v-slot="{ row }">
          <span v-if="row.vmStatus === 0">未投放</span>
          <span v-else-if="row.vmStatus === 1">运营</span>
          <span v-else-if="row.vmStatus === 3">撤机</span>
          <span v-else /> </template></el-table-column>
        <el-table-column prop="userName" label="操作" width="180">
          <template v-slot="{ row }">
            <el-button size="mini" type="text" @click="getShouhuojiHuodao(row.innerCode,row.businessId)">货道</el-button>
            <el-button
              size="mini"
              type="text"
              @click="celue(row.innerCode)"
            >策略</el-button>
            <el-button
              size="mini"
              type="text"
              @click="xiugaishebei(row)"
            >修改</el-button>
          </template></el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pagination-container">
        <span
          class="pageText"
        >共{{ totalCount }}条记录 第 {{ pageIndex }}/{{ totalPage }} 页</span>
        <el-pagination
          background:true
          layout="prev, pager, next,slot"
          prev-text="上一页"
          next-text="下一页"
          @prev-click="prevPage"
          @next-click="nextPage"
        />
      </div>
      <!-- 新建弹层 -->
      <el-dialog
        center
        class="addDialog"
        :visible.sync="showDialogadd"
        width="40%"
        @close="quxiao"
      >
        <template #title><span class="title">新增设备</span></template>
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="设备编号：">
            <span>系统自动生成</span>
          </el-form-item>
          <el-form-item prop="vmType" label="选择型号：">
            <el-select
              v-model="addForm.vmType"
              placeholder="请选择"
              show-word-limit
              style="width: 80%"
            >
              <el-option
                v-for="item in vmTypeList"
                :key="item.typeId"
                :label="item.name"
                :value="item.typeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="nodeId" label="选择点位：">
            <el-select
              v-model="addForm.nodeId"
              placeholder="请选择"
              show-word-limit
              style="width: 80%"
            >
              <el-option
                v-for="item in nodeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="quxiao" @click="quxiao">取 消</el-button>
          <el-button
            type="primary"
            class="addBtn"
            @click="addShopCar"
          >确 定</el-button>
        </div>
      </el-dialog>

      <!-- 取消策略 -->
      <el-dialog
        center
        class="addDialog"
        :visible.sync="showDialogcelue"
        width="40%"
      >
        <template #title><span class="title">策略管理</span></template>
        <ul class="celue">
          <li>
            <span>机器编号：</span>
            <span>{{ celuevalue.innerCode }}</span>
          </li>
          <li>
            <span>策略名称：</span>
            <span>{{ celuevalue.policyName }}</span>
          </li>
          <li>
            <span>策略方案：</span>
            <span>{{ celuevalue.discount }}</span>
          </li>
        </ul>
        <div slot="footer" class="dialog-footer">
          <el-button class="quxiao" @click="quxiaoCelue">取消策略</el-button>
        </div>
      </el-dialog>
      <!-- 批量策略管理 -->
      <el-dialog
        center
        class="addDialog"
        :visible.sync="showDialogpiliangcelue"
        width="30%"
      >
        <template #title><span class="title">批量策略管理</span></template>
        <span class="choosecelue">选择策略:</span>
        <el-select
          v-model="policyId"
          placeholder="请选择"
          show-word-limit
          style="width: 80%"
        >
          <el-option
            v-for="item in ideaList"
            :key="item.policyId"
            :label="item.policyName"
            :value="item.policyId"
          />
        </el-select>
        <div slot="footer" class="dialog-footer">
          <el-button
            class="quxiao"
            @click="showDialogpiliangcelue = false"
          >取 消</el-button>
          <el-button
            type="primary"
            class="addBtn"
            @click="celueBtn"
          >确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改设备 -->
      <el-dialog
        center
        class="xiugaiDialog"
        :visible.sync="showDialogxiugai"
        width="35%"
      >
        <template #title><span class="title">修改设备</span></template>
        <ul class="xiugaishebei">
          <li>
            <span>机器编号：</span>
            <span>{{ xiugai.innerCode }}</span>
          </li>
          <li>
            <span>供货时间：</span>
            <span>{{ xiugai.createTime }}</span>
          </li>
          <li>
            <span>设备类型：</span>
            <span>{{ xiugai.shebeiName }}</span>
          </li>
          <li>
            <span>设备容量：</span>
            <span>{{ xiugai.shebeirongliang }}</span>
          </li>
          <li>
            <span>设备点位：</span>
            <el-select
              v-model="dianweiValue"
              placeholder="请选择"
              show-word-limit
              style="width: 80%"
            >
              <el-option
                v-for="item in xiugai.dianweiList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </li>
          <li>
            <span>合作商：</span>
            <span>{{ xiugai.hezuoshang }}</span>
          </li>
          <li>
            <span>所属区域：</span>
            <span>{{ xiugai.area }}</span>
          </li>
          <li>
            <span>设备地址：</span>
            <span>{{ xiugai.addr }}</span>
          </li>
        </ul>
        <div slot="footer" class="dialog-footer">
          <el-button class="quxiao" @click="quxiao">取 消</el-button>
          <el-button
            type="primary"
            class="addBtn"
            @click="xiugaishebeiBtn"
          >确 定</el-button>
        </div>
      </el-dialog>
      <!-- 货道 -->
      <el-dialog
        center
        class="huodaoDialog"
        :visible.sync="showDialoghuodao"
        width="40%"
        @close="huodaoDialogclose"
      >
        <template #title><span class="title">货道设置</span></template>
        <!-- 导航 -->
        <div class="nav">
          <ul class="navul">
            <li class="fl"><span>货道行数：</span><span>{{ rowhuodao }}</span></li>
            <li class="fl"><span>货道列数：</span><span>{{ clumhuodao }}</span></li>
            <li class="fl"><span>货道容量(个)：</span><span>{{ rongliang }}</span></li>
            <li class="fr"><el-button @click="getzhinengpaihuo">智能排货</el-button></li>
          </ul>
        </div>
        <!-- 轮播 -->
        <div class="block">
          <el-carousel :autoplay="false" :loop="false" trigger="click" indicator-position="none">
            <el-carousel-item v-for="(item,index) in text" :key="index">
              <el-scrollbar ref="scrollMenuRef" class="demo1">
                <!-- 最小高度 -->
                <ul>
                  <li v-for="item1 in item" :key="item1.channelId">
                    <div v-if="item1.sku" class="pic">
                      <img :src="item1.sku.skuImage" alt="">
                      <p>{{ item1.sku.skuName }}</p>
                      <div class="miniTip">
                        {{ item1.channelCode }}
                      </div>
                    </div>
                    <div v-else class="pic">
                      <img src="" alt="">
                      <p>暂无商品</p>
                      <div class="miniTip">
                        {{ item1.channelCode }}
                      </div>
                    </div>
                    <div class="txt">
                      <el-button type="text" style="color:blue" @click="getaddshangpingList(item1)">添加</el-button>
                      <el-button v-if="item1.sku" ref="del" type="text" style="color:red" @click="huodaodel(item1)">删除</el-button>
                      <el-button v-else disabled type="text" style="color:#ffe4e4">删除</el-button>
                    </div>
                  </li>
                </ul>
              </el-scrollbar>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            class="addBtn"
            @click="huodaoDialogclose"
          >确 定</el-button>
        </div>
      </el-dialog>
      <!-- 智能排货 -->
      <el-dialog
        center
        class="huodaoDialog"
        :visible.sync="showDialogzhineng"
        width="40%"
        @close="huodaoDialogzhinengclose"
      >
        <template #title><span class="title">智能排货</span></template>
        <p>该区域属于{{ area }}商圈适合销售一下商品：</p>
        <!-- 轮播 -->
        <div class="block">
          <el-carousel :autoplay="false" :loop="false" trigger="click" indicator-position="none">
            <el-carousel-item v-for="item in 1" :key="item">
              <el-scrollbar ref="scrollMenuRef" class="demo1">
                <ul>
                  <li v-for="(item1,index) in zhinengList" :key="index">
                    <div class="pic">
                      <img :src="item1.image" alt="">
                      <p>{{ item1.skuName }}</p>
                      <!-- <div class="miniTip">
                        {{ item1.channelCode }}
                      </div> -->
                    </div>
                    <!-- <div v-else class="pic">
                      <img src="" alt="">
                      <p>暂无商品</p>
                      <div class="miniTip">
                        {{ item1.channelCode }}
                      </div>
                    </div> -->
                    <!-- <div class="txt">
                      <el-button type="text" style="color:blue">添加</el-button>
                      <el-button v-if="item1.sku" type="text" style="color:red">删除</el-button>
                      <el-button v-else disabled type="text" style="color:#ffe4e4">删除</el-button>
                    </div> -->
                  </li>
                </ul>
              </el-scrollbar>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            class="addBtn"
            @click="huodaoDialogzhinengclose"
          >采纳建议</el-button>
        </div>
      </el-dialog>
      <!-- 添加 -->
      <el-dialog
        center
        class="huodaoDialog"
        :visible.sync="showDialoghuodaoadd"
        width="40%"
        @close="huodaoDialogclose"
      >
        <template #title><span class="title">选择商品</span></template>
        <!-- 导航 -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="商品名称：">
            <el-input v-model="addspsearch" clearable placeholder="请输入" @input="addsearch" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="addsearch"
            >查询</el-button>
          </el-form-item>
        </el-form>
        <!-- 轮播 -->
        <div class="block">
          <el-carousel :autoplay="false" :loop="false" trigger="click" indicator-position="none">
            <el-carousel-item v-for="(item,index) in addshangping" :key="index">
              <el-scrollbar ref="scrollMenuRef" class="demo1">
                <!-- 最小高度 -->
                <ul>
                  <li v-for="(item1,index1) in item" :key="index1" @click="chooseshangping(item1)">
                    <div class="pic">
                      <img :src="item1.skuImage" alt="">
                      <p>{{ item1.skuName }}</p>
                      <div v-show="gou" class="miniTip1">
                        <img src="" alt="">
                      </div>
                    </div>
                  </li>
                </ul>
              </el-scrollbar>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button
            ref="addshangpingBtn"
            type="primary"
            class="addBtn addShangPing"
            disabled
            @click="huodaoDialogclose"
          >确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  putIdea,
  quxiaoCelue,
  putdianwei,
  getShouhuojiCelue,
  getIdeaList,
  getShebeiLeixing,
  addShopCar,
  getvmTypeList,
  getnodeList,
  getShouhuojiHuodao,
  getzhinengpaihuo,
  getzhinengpaihuoquyu,
  getaddshangpingList,
  getsousuoList
} from '@/api/vm'
export default {
  name: 'Index',
  data() {
    return {
      // 搜索
      addspsearch: '',
      addshangpingsousuo: [],
      // 添加
      gou: 0,
      addshangping: [],
      showDialoghuodaoadd: false,
      // 智能排货
      businessId: '',
      area: '',
      zhinengList: [],
      showDialogzhineng: false,
      // 测试
      text: [],
      // 货道
      huodaoList: [],
      showDialoghuodao: false,
      demo: [],
      rowhuodao: '',
      clumhuodao: '',
      rongliang: '',
      // 修改策略
      showDialogxiugai: false,
      dianweiValue: '', // nodeId
      id: '',
      xiugai: {
        nodeId: '',
        dianweiList: [],
        innerCode: '',
        createTime: '',
        shebeiName: '',
        shebeirongliang: '',
        hezuoshang: '',
        area: '',
        addr: ''
      },
      // 批量策略
      showDialogpiliangcelue: false,
      ideaList: [],
      policyId: null,
      selection: [],
      // 策略
      showDialogcelue: false,
      celuevalue: {},
      innerCode: '',
      // 批量(货机编号列表)⭐
      innerCodeList: [],
      // 新增售货机&点位列表
      vmTypeList: [],
      nodeList: [],
      // 新增弹层
      showDialogadd: false,
      addForm: {
        vmType: null,
        nodeId: '',
        createUserId: 63
      },
      // 表单校验
      rules: {
        vmType: [
          {
            required: true,
            message: '请输入',
            trigger: 'change'
          }
        ],
        nodeId: [
          {
            required: true,
            message: '请输入',
            trigger: 'change'
          }
        ]
      },
      // 设备编号
      vmCode: '',
      // table列表
      list: [],
      // 分页
      pageIndex: 1,
      pageSize: 10,
      totalCount: null,
      totalPage: null,
      res1: [[], []]
    }
  },
  computed: {
    piliangdemo() {
      return this.selection.map((item) => {
        return item.innerCode
      })
    }
  },
  created() {
    this.getShebeiLeixing()
  },
  mounted() {
    // 监听浏览器/页面滚动条的滚动
    // window.addEventListener('scroll', this.scrollContent)
    // 监听el-scrollbar内滚动条的滚动

  },

  methods: {
    // 搜索
    async  addsearch() {
      // const res = await getaddshangpingList()
      // const res2 = this.addshangpingsousuo.filter(item => item.skuName.includes(this.addsearch))
      // console.log(res2)
      this.addshangping = []
      const res = await getsousuoList(this.addspsearch)
      this.addshangpingsousuo = res.currentPageRecords
      let add = []
      this.addshangpingsousuo.forEach((item, index) => {
        add.push(item)
        if (add.length === 10) {
          this.addshangping.push(add)
          add = []
        }
      })
    },
    // 点击商品
    chooseshangping(item1) {
      this.gou = 1
    },
    // 添加
    async getaddshangpingList(item1) {
      const res = await getaddshangpingList()
      this.showDialoghuodaoadd = true
      this.addshangpingsousuo = res.currentPageRecords
      // console.log(this.addshangping)
      let add = []
      this.addshangpingsousuo.forEach((item, index) => {
        add.push(item)
        if (add.length === 10) {
          this.addshangping.push(add)
          add = []
        }
      })
      console.log(this.addshangping)
    },
    // 删除
    async huodaodel(item) {
      this.$delete(item, 'sku')
    },
    // 排货关闭
    huodaoDialogzhinengclose() {
      this.showDialogzhineng = false
      this.zhinengList = []
    },
    // 智能排货
    async getzhinengpaihuo() {
      const res = await getzhinengpaihuo(this.businessId)
      const area = await getzhinengpaihuoquyu(this.businessId)
      this.area = area
      this.zhinengList = res
      console.log(res)
      console.log(area)
      this.showDialogzhineng = true
    },
    // 关闭货道弹层
    huodaoDialogclose() {
      this.showDialoghuodao = false
      this.text = []
    // console.log(this.$refs.scrollMenuRef.wrap.scrollTop)
    },
    // 获取售货机货道
    async getShouhuojiHuodao(innerCode, businessId) {
      this.businessId = businessId
      this.showDialoghuodao = true
      const res = await getShouhuojiHuodao(innerCode)
      this.huodaoList = JSON.parse(JSON.stringify(res))
      console.log(this.huodaoList)
      this.demo = res.map(item => {
        return item.channelCode
      })
      const clum = this.demo.filter(item => {
        return item.startsWith('1')
      })
      // res.map((item, i) => i <= 4 || i % 10 <= 4 ? this.res1[0].push(item) : this.res1[1].push(item))
      // 列
      this.clumhuodao = clum.at(-1).split('-').at(-1)
      // 行
      this.rowhuodao = this.demo.at(-1).split('-').at(0)
      // 个数
      this.rongliang = this.clumhuodao
      // 处理渲染数据1
      // for (let i = 1; i <= this.rowhuodao; i++) {
      //   const erwei = []
      //   this.huodaoList.forEach((item) => {
      //     if (+item.channelCode.split('-').at(0) === i) {
      //       erwei.push(item)
      //     }
      //   })
      //   this.text.push(erwei)
      // }
      // console.log(this.text)
      // 处理渲染数据2
      // for (let i = 1; i <= 2; i++) {
      const erwei1 = []
      const erwei2 = []
      this.huodaoList.forEach((item) => {
        if (+item.channelCode.split('-').at(-1) <= 5) {
          erwei1.push(item)
        } else {
          erwei2.push(item)
        }
      })
      this.text.push(erwei1)
      if (erwei2.length > 0) {
        this.text.push(erwei2)
      }
      // }
      // console.log(this.text)
    },
    // 修改设备（确认）
    async xiugaishebeiBtn() {
      try {
        await putdianwei(this.id, this.dianweiValue)
        this.showDialogxiugai = false
        this.$message.success({
          message: '修改点位成功',
          offset: 90
        })
        this.getShebeiLeixing()
      } catch (error) {
        this.$message.warning({
          message: error.response.data,
          offset: 90
        })
      }
    },
    // 修改设备
    async xiugaishebei(row) {
    // 获取设备点位
      const resnode = await getnodeList({ pageIndex: 1, pageSize: 10000 })
      this.xiugai.dianweiList = resnode.currentPageRecords
      this.dianweiValue = row.nodeId
      this.showDialogxiugai = true
      this.id = row.id
      this.xiugai.innerCode = row.innerCode
      this.xiugai.createTime = row.createTime
      this.xiugai.shebeiName = row.type.name
      this.xiugai.shebeirongliang = row.type.channelMaxCapacity
      this.xiugai.hezuoshang = row.ownerName
      this.xiugai.area = row.region.name
      this.xiugai.addr = row.node.name
    },
    // 取消策略
    async quxiaoCelue() {
      const res = await quxiaoCelue(
        this.celuevalue.innerCode,
        this.celuevalue.policyId
      )
      if (res) {
        this.showDialogcelue = false
        this.$message.success({
          message: '取消策略成功',
          offset: 90
        })
        this.getShebeiLeixing()
      }
    },
    // 应用策略(确认)
    async celueBtn() {
      this.innerCodeList.push(this.innerCode)
      this.innerCodeList = this.innerCodeList.filter((item) => item !== '')
      const res = await putIdea({
        innerCodeList: this.innerCodeList,
        policyId: this.policyId
      })
      if (res) {
        this.showDialogpiliangcelue = false
        this.$message.success({
          message: '应用策略成功',
          offset: 90
        })
        this.getShebeiLeixing()
        this.innerCodeList = []
        this.policyId = null
      }
    },
    // 点击策略
    async celue(innerCode) {
      this.innerCode = innerCode
      const res = await getShouhuojiCelue(innerCode)
      this.celuevalue = res
      // console.log(this.celuevalue)
      if (res) {
        this.showDialogcelue = true
      } else {
        this.showDialogpiliangcelue = true
        const res1 = await getIdeaList()
        this.ideaList = res1
      }
    },
    // 点击批量⭐
    async piliang() {
      if (this.innerCodeList.length < 1) {
        this.$message.warning({
          message: '请勾选售货机',
          offset: 90
        })
        return
      }
      this.showDialogpiliangcelue = true
      const res = await getIdeaList()
      this.ideaList = res
    },
    // 批量
    async select(selection) {
      this.selection = selection
      console.log(this.piliangdemo)
      this.innerCodeList = this.piliangdemo
    },
    // 点击新建按钮
    async addTable() {
      const resvmType = await getvmTypeList({ pageIndex: 1, pageSize: 10000 })
      this.vmTypeList = resvmType.currentPageRecords
      const resnode = await getnodeList({ pageIndex: 1, pageSize: 10000 })
      this.nodeList = resnode.currentPageRecords
      // console.log(this.vmTypeList)
      // console.log(this.nodeList)
      this.showDialogadd = true
    },
    // 新增售货机(确定)
    async addShopCar() {
      try {
        await this.$refs.addForm.validate()
        const res = await addShopCar(this.addForm)
        if (res) {
          this.$message.success({
            message: '新增售货机成功',
            offset: 90
          })
        }
        this.showDialogadd = false
      } catch (error) {
      // console.log(new Error())
      }
    },
    // 取消
    quxiao() {
      this.showDialogadd = false
      this.$refs.addForm.resetFields()
    },
    // 搜索
    async search() {
      const res = await getShebeiLeixing({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        innerCode: this.vmCode
      })
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      this.list = res.currentPageRecords
    },
    // 获取数据列表
    async getShebeiLeixing() {
      const res = await getShebeiLeixing({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      })
      // console.log(res)
      // this.pageIndex = res.pageIndex
      // this.pageSize = res.pageSize
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      this.list = res.currentPageRecords
    },
    // 切换上分页
    prevPage() {
      if (this.pageIndex !== 1) {
        this.pageIndex--
        this.getShebeiLeixing()
      }
    },
    // 下一页
    nextPage() {
      if (this.pageIndex < this.totalPage) {
        this.pageIndex++
        this.getShebeiLeixing()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
::v-deep .el-button{
  padding: 10px 20px;
}
::v-deep .el-dialog{
  border-radius: 10px;
}
.miniTip1{
  position: absolute;
  top: -15px;
  left: -35px;
  img{
    width: 20px !important;
  height: 20px !important;
  }
  // position: absolute;
  // top: 0;
  // left: 0;
}
.el-table {
  .el-button{
    // margin: 0;
    padding:0;
}
}
//货道
.huodaoDialog {
  .block{
    height: 100%;
    width: 100%;
    // background-color: #ff5e20;
    .el-carousel{
      .demo1{
        height: 100%;
        width: 100%;

      ul{
        // background-color: #5f84ff;
        width: 100%;
        max-height: 710px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: flex-start;
        li{
          position: relative;
          box-sizing: border-box;
          width: 19%;
          height: 149px;
          // margin-bottom: 0.5%;
          box-shadow: 0 2px 4px 0 rgba(0,0,0,.06);
          .pic{
            position: relative;
            background-color: #f6f7fb;
            height: 80%;
            width: 100%;
            img{
              width: 45%;
              height: 45%;
              position: absolute;
              left: 35px;
              top: 15px;
            }
            p{
             width: 100%;
             text-align: center;
             position: absolute;
             bottom: 15px;
            }
            .miniTip{
              position: absolute;
              top: 10px;
              left: 0;
              font-size: 12px;
              background-color: #829bed;
              width: 40px;
              height: 20px;
              border-radius: 0 10px 10px 0;
              text-align: center;
              line-height: 20px;
              color: #fff;
            }
          }
          .txt{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 20%;
            .el-button{
              padding: 0;
            }
          }
        }
      }

    }
    }
  }
  .title {
    float: left;
  }
  .addBtn {
    color: #fff;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: 0;
  }
  .nav {
    position: relative;
    width: 100%;
    background-color: #f3f6fb;
    padding-left: 20px;
    margin-bottom: 15px;
    .navul {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 60px;
      li {
        margin-right: 30px;
        .el-button {
          position: absolute;
          right: 30px;
          top: 13px;
          background-color: #5f84ff;
          color: #fff;
          border: 0;
        }
      }
    }
  }
}
//修改设备
.xiugaiDialog {
  .title {
    float: left;
  }
  .xiugaishebei {
    display: flex;
    flex-direction: column;
    height: 100%;
    li {
      margin-top: 30px;
    }
  }

  .addBtn {
    color: #fff;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: 0;
  }
  .quxiao {
    background-color: #fdf6ec;
    border: 0;
    color: #121212;
  }
}
//批量策略
.choosecelue {
  margin-right: 20px;
}
//策略
.celue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  li {
    width: 50%;
    // background-color: #5f84ff;
    margin-top: 20px;
  }
}
li {
  list-style: none;
}
//新建表单
.addDialog {
  .title {
    float: left;
  }
  .addBtn {
    color: #fff;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: 0;
  }
  .quxiao {
    background-color: #fdf6ec;
    border: 0;
    color: #121212;
  }
}
// 搜索框
.demo-form-inline {
  margin-bottom: 20px;
  background-color: #fff;
  height: 64px;
  display: flex;
  .el-form-item {
    margin-top: 13px;
    margin-left: 15px;
    .el-button {
      background-color: #5f84ff;
    }
  }
}
//新建&批量操作
.addTable {
  padding: 20px 0 5px 15px;
  margin-left: -8px;
  background-color: #fff;
}
.add {
  color: #fff;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border: 0;
}
.piliang {
  background-color: #fdf6ec;
  border: 0;
  color: #121212;
}
//表格
.table {
  padding-left: 15px;
  margin-left: -8px;
}
//分页器
.pagination-container {
  margin-left: -8px;
  width: 100%;
  height: 100px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 50px 50px 40px;
}
::v-deep .pageText {
  font-size: 18px;
  color: #dbdfe5;
  margin-left: 15px;
}
::v-deep .btn-prev {
  width: 70px;
  height: 32px;
  background-color: #d5ddf8;
  border-radius: 2px;
}
::v-deep .btn-next {
  width: 70px;
  height: 32px;
  background-color: #d5ddf8;
  border-radius: 2px;
  margin-left: 15px;
}
</style>
